<template>
	<view>
		<form @submit="formSubmit" >
			<view class="add">
				<view class="addList">
					<view class="Phone"><text>姓&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp名</text></view>
					<view class="input"><input name="familyName" v-model="familyAdd.familyName" type="text" value="" />
					</view>
				</view>
				<hr />
				<view class="addList">
					<view class="Phone"><text>出生日期</text></view>
					<view class="uni-list-cell-dbs">
						<picker name="birthday" v-model="familyAdd.birthday" mode="date" @change="bindDateChange">
							<view class="uni-input">{{familyAdd.birthday}}</view>
						</picker>
					</view>

					<!-- <uni-datetime-picker type="date" :clearIcon="false" v-model="familyAdd.birthday" :border="false"
					@maskClick="maskClick" /> -->
					<!-- <view class="input"><input v-model="familyAdd.birthday" type="text" value="" /></view> -->
				</view>
				<hr />
				<view class="addList">
					<view class="Phone"><text>性&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp别</text></view>

					<view class="uni-form-item uni-column">
						<radio-group name="gender" class="xuang" @change="radioChange">
							<label v-for="(item,index) in radioItems" :key="index">
								<radio :id="item.name" :value="item.name" :checked="index === current "></radio>
								<label class="label-2-text" :for="item.name">
									<text>{{item.value}}</text>
								</label>
							</label>
						</radio-group>
					</view>
				</view>
				<!-- <view class="input"><input v-model="familyAdd.gender" type="text" value="" /></view> -->

				<hr />
				<view class="addList">
					<view class="Phone"><text>手&nbsp&nbsp机&nbsp&nbsp号</text></view>
					<view class="input"><input name="phone" v-model="familyAdd.phone" type="text" value="" /></view>
				</view>
				<hr />
				<view class="addList">
					<view class="Phone"><text>关&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp系</text></view>
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<picker name="relationship"  v-model="familyAdd.relationship" @change="bindPickerChange" :value="index" :range="array">
									<view class="uni-input">{{array[currents]}}</view>
								</picker>
							</view>
						</view>
					</view>
					<!-- <view class="input"><input v-model="familyAdd.relationship" type="text" value="" /></view> -->
				</view>
				<hr />

				<!-- 	<view class="addList">
				<view class="Phone">新密码</view>
				<view class="input"><input type="text" :password="show" name="password" v-model="familyAdd.password"
						value="" /></view>
				<view class="yanjing">
					<sunui-password @change="showPass" />
				</view>
			</view>
			<hr /> -->


				<!-- 备注 -->
				<view class="addLists">
					<view class="Phone"><text>备&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp注</text></view>
					<view><textarea v-model="familyAdd.remark" auto-height /></view>
					<!-- 	<view class="texta">备&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp注<view class="inputs"><textarea v-model="familyAdd.remark"></textarea></view></view> -->
				</view>

				<button class="sub_button" form-type="submit">修改</button>
			</view>
		</form>
	</view>
</template>

<script>
	import graceChecker from "../../../common/graceChecker.js"
	function getDate(type) {
		const date = new Date();

		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;

		return `${year}-${month}-${day}`;
	}
	export default {
		data() {
			return {
				show: true,
				shows: true,
				oldPassword: '',
				newPassword: '',
				current: 0,
				currents: 0,
				familyAdd: {
					birthday: '',
					familyName: '',
					gender: '',
					phone: '',
					id: '',
					relationship: '',
					memberId: '',
					remark: '',
					password: ''
				},
				array: ['请选择', '本人', '父母', '兄弟', '朋友', '子女', '其他', '配偶'],
				index: 0,
				radioItems: [{
						name: '0',
						value: '男',

					},
					{
						name: '1',
						value: '女',

					}
				],
			}
		},
		onShow() {
			this.family();
		},
		onLoad: function(option) {
			const item = JSON.parse(decodeURIComponent(option.item));
			this.familyAdd = item
			// console.log(item)
			// console.log(this.familyAdd)
			if (this.familyAdd.gender == 1) {
				this.current = 1
			} else {
				this.current = 0
			}
			if (this.familyAdd.relationship == 1) {
				this.currents = 1
			} else if (this.familyAdd.relationship == 2) {
				this.currents = 2
			} else if (this.familyAdd.relationship == 3) {
				this.currents = 3
			} else if (this.familyAdd.relationship == 4) {
				this.currents = 4
			} else if (this.familyAdd.relationship == 5) {
				this.currents = 5
			} else if (this.familyAdd.relationship == 6) {
				this.currents = 6
			} else if (this.familyAdd.relationship == 7) {
				this.currents = 7
			}
		},
		methods: {
			showPass(e) {
				this.show = e;
			},
			showPas(e) {
				this.shows = e;
			},

			bindDateChange: function(e) {
				this.familyAdd.birthday = e.detail.value
			},

			async formSubmit(e) {
				// console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				var rule = [{
						name: "familyName",
						checkType: "string",
						checkRule: "1,3",
						errorMsg: "请输入姓名"
					},
					{
						name: "birthday",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "请输入出生日期"
					},
					{
						name: "gender",
						checkType: "in",
						checkRule: "0,1",
						errorMsg: "请选择性别"
					},
					{
						name: "phone",
						checkType: "string",
						checkRule: "11",
						errorMsg: "请输入11位数字"
					},
					{
						name: "relationship",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "请选择与家属的关系"
					}
				];
				//进行表单检查
				var formData = e.detail.value;
				// console.log(formData)
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {

					try {
						uni.showLoading({
							title: '提交保存'
						});
						const ret = await this
							.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
								url: '/api-operate/families/save',
								method: "POST",
								data: this.familyAdd
							});
						// console.log(ret)
						if (ret.success == true) {
							uni.showToast({
								title: '修改成功',
								duration: 2000
							});
							uni.navigateBack({ //关闭当前页面，跳转到应用内的某个页面。
								url: '/pages/familyManagement/index'
							})
						} else {
							uni.showToast({
								title: ret.msg,
								duration: 2000
							});
						}

					} catch (e) {
						uni.hideLoading(); //加载结束
						uni.showToast({
							title: '家属列表,请稍后再试',
							duration: 2000
						});
					}

				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}








			},
			family() {
				const id = uni.getStorageSync('id');
				// console.log(id)
				this.familyAdd.memberId = id
				// console.log(this.radioItems)
			},
			bindPickerChange: function(e) {
				// console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
				this.familyAdd.relationship = this.index
				if (this.familyAdd.relationship == 1) {
					this.currents = 1
				} else if (this.familyAdd.relationship == 2) {
					this.currents = 2
				} else if (this.familyAdd.relationship == 3) {
					this.currents = 3
				} else if (this.familyAdd.relationship == 4) {
					this.currents = 4
				} else if (this.familyAdd.relationship == 5) {
					this.currents = 5
				} else if (this.familyAdd.relationship == 6) {
					this.currents = 6
				} else if (this.familyAdd.relationship == 7) {
					this.currents = 7
				}
				// console.log(this.familyAdd)
			},
			radioChange: function(e) {
				var checked = e.target.value
				// var changed = {}
				// for (var i = 0; i < this.radioItems.length; i++) {
				// 	if (checked.indexOf(this.radioItems[i].name) !== -1) {
				// 		changed['radioItems[' + i + '].checked'] = true
				// 	} else {
				// 		changed['radioItems[' + i + '].checked'] = false
				// 	}
				// }
				this.familyAdd.gender = checked
				if (this.familyAdd.gender == 1) {
					this.current = 1
				} else {
					this.current = 0
				}
			},

		}

	}
</script>

<style lang="scss">
	@import '@/common/uni-nvue.scss';

	.add {
		margin-top: 20rpx;

		hr {
			border: none;
			height: 3px;
			background-color: #f3f3f3;
		}
	}

	.addList {
		// margin-top: 20rpx;
		height: 100rpx;
		background-color: #FFFFFF;

		display: flex;
		color: #565656;
		font-size: 13px;
		font-weight: 600;
		flex-direction: row;
		align-items: center;
	}

	.addLists {
		// margin-top: 20rpx;
		// height: 400rpx;
		background-color: #FFFFFF;
		width: 100%;
		// display: flex;
		color: #565656;
		font-size: 13px;
		font-weight: 600;
		flex-direction: row;

		// align-items: center;
		textarea {
			// margin-left: 60rpx;
			background-color: #FFFFFF;
			// width: 200rpx;
			margin-left: 80rpx;
			font-size: 35rpx;
			color: #565656;
			margin-top: 20px;
		}
	}


	.Phone {
		// background-color: #007AFF;
		width: 200rpx;
		margin-left: 40rpx;
		font-size: 35rpx;
	}

	.input {
		font-size: 30rpx;
		color: #949494;

	}

	.inputs {
		font-size: 30rpx;
		color: #949494;
		margin-top: 40rpx;
	}

	.xuang {
		display: flex;

		label {
			margin-right: 40rpx;
		}
	}

	.button {
		margin-top: 400rpx;
		background-color: #da422a;
		width: 85%;
		color: #FFFFFF;
	}

	.uni-list {
		// background-color: #007AFF;
		width: 70%;
	}

	.uni-input {
		font-size: 30rpx;
		color: #959595;
	}
</style>
